<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>ppt设置</title>

  <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
  <meta http-equiv="Pragma" content="no-cache" />
  <meta http-equiv="Expires" content="0" />

  <script src="../js/vue/vue.js"></script>
  <link rel="stylesheet" href="../js/elementui/index.css">
  <script src="../js/elementui/index.js"></script>
  <script src="../js/theme/FileSaver.js"></script>
  <script src="/js/theme/pptx/libs/jquery.min.js"></script>
  <script src="/js/common.js?t=20211213150417"></script>
  <link rel="stylesheet" href="../css/common.css">

  <link rel="stylesheet" href="/js/layer/layer.css" type="text/css">
  <script src="/js/layer/layer.js"></script>

  <script src="/js/vue/upload-button.js?t=20230310"></script>
  <style>

    /*.col-tree, .col-tree + .el-col {*/
    /*  transition: 0.2s;*/
    /*}*/

    /*.col-tree:hover {*/
    /*  width: 25% !important;*/
    /*}*/

    /*.col-tree:hover + .el-col {*/
    /*  width: 75% !important;*/
    /*}*/

    .cert-text {
      padding-top: 5px;
      margin-bottom: 5px !important;
    }

    .step-box {
      line-height: 30px;
      height: 30px;
    }

    .div-page-ppt .el-col > .el-input, .div-page-ppt .el-col > .el-select {
      padding-right: 5px;
      box-sizing: border-box;
    }

    .cert-text-del {
      float: left;
      margin-left: -50px;
      position: absolute;
      top: 0px;
      right: 100%;
      width: 100px;
      text-align: right;
      padding-right: 19px;
    }

    .ppt-text-del {
      float: left;
      margin-left: -100px;
      line-height: 50px;
    }

    .cert-text-text {
      line-height: 20px;
      text-align: left;
    }

    .cert-text-show {
      transition: .3s;
      /*text-align: center;*/
      min-height: 60px;
      /*line-height: 60px;*/
      border-bottom: 1px solid #d8d7d7;
      border-top: 1px solid white;
      /*margin-bottom: 15px;*/
    }

    .cert-text-show:hover {
      border-bottom: 1px solid gray;
      border-top: 1px solid gray;
      cursor: pointer;
      background-color: aliceblue
    }

    .cert-text-list input {
      padding: 0px 5px;
    }

    .cert-text-text-span span {
      margin-right: 6px;
      padding: 0px 5px;
      background-color: #d7ecd0;
    }

    .title {
      float: left;
      font-size: 20px;
      font-weight: bold;
      margin-left: 55px;
    }

    .item-info span {
      margin-right: 5px;
      background-color: #f5e9ff;
    }

    .div-checkbox {
      border: 1px solid #DCDFE6;
      border-radius: 4px;
      box-sizing: border-box;
      height: 28px;
      margin-top: 1px;
      overflow: hidden;
    }

    .div-checkbox .el-checkbox {
      margin-right: 5px;
      float: left;
    }

    /*.pp-text-info2 {background-color: #f5e9ff;margin-top: 5px;}*/
  </style>
</head>

<body>
<div id="app">
  <div class="cert-editor" style="padding: 20px;min-width: 1500px;">
    <el-row>
      <el-col class="col-tree" :span="4">
        <div style="border: 1px solid gray;padding: 10px;margin-top:50px;min-height: 600px;">
          <el-tree ref="tree" :data="pptList" node-key="id" :props="defaultProps" highlight-current="true"
                   :expand-on-click-node="false"
                   default-expanded-keys="['usad','usap']"
                   @node-click="handleNodeClick">
                        <span class="custom-tree-node" slot-scope="{ node, data }">
                             <i :class="treeNodeIcon[data.level]"></i>
                             <span>{{ node.label }}</span>
                        </span>
          </el-tree>
        </div>
      </el-col>
      <el-col :span="20">
        <div style="margin-left:2%;min-height: 40px;">
          <div v-if="currentNode.level == 0">
            <div class="edit-menu">
              <el-button class="el-button" type="primary" plain @click="addPpt">添加</el-button>
            </div>
          </div>
          <!-- ppt -->
          <div class="div-form-ppt" v-show="currentNode.level==2">
            <div class="edit-menu">
              <el-button class="el-button" type="primary" plain @click="addPpt">添加</el-button>
              <el-button class="el-button" type="success" plain @click="copyPpt">复制</el-button>
              <el-button class="el-button" type="danger" style="float:right;margin-right:20px;" @click="deletePpt">删除
              </el-button>
            </div>
            <div class="edit-form" style="padding: 20px;margin-top:10px;">
              <el-form ref="form" :model="form" label-width="130px" size="mini">
                <el-row>
                  <el-col :span="5">
                    <el-form-item label="数据类型">
                      <el-select v-model="formPpt.type" placeholder="请选择" style="width:100%">
                        <el-option value="usad">usad</el-option>
                        <el-option value="usap">usap</el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="10">
                    <el-form-item label="ppt名称" prop="name" label-width="80px">
                      <el-input v-model="formPpt.name"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="9">
                    <el-form-item label="尺寸(宽/高/单位)" prop="width" class="div-page-ppt">
                      <el-col :span="8">
                        <el-input v-model="formPpt.width" :placeholder="'宽度('+formPpt.unit+')'"></el-input>
                      </el-col>
                      <el-col :span="8">
                        <el-input v-model="formPpt.height" :placeholder="'高度(('+formPpt.unit+')'"></el-input>
                      </el-col>
                      <el-col :span="8">
                        <el-select v-model="formPpt.unit" placeholder="测量单位">
                          <el-option value="pt">pt</el-option>
                          <el-option value="cm">cm</el-option>
                          <el-option value="inches">inches</el-option>
                        </el-select>
                      </el-col>

                    </el-form-item>
                  </el-col>

                </el-row>
                <el-row>
                  <el-form-item label="默认设置" class="div-page-ppt">
                    <el-col :span="4">
                      <el-input v-model="formPpt.default.font" placeholder="font(字体)"></el-input>
                    </el-col>
                    <el-col :span="4">
                      <el-input v-model="formPpt.default.color" placeholder="color(颜色)"></el-input>
                    </el-col>

                  </el-form-item>
                </el-row>


                <!--master-->
                <div class="title">模板页</div>
                <el-row class="div-page-ppt">
                  <el-form-item>
                    <div class="step-box">
                      <el-row class="cert-text">
                        <el-col :span="6">页面名称</el-col>
                        <el-col :span="14">底图</el-col>
                        <el-col :span="2">操作</el-col>
                      </el-row>
                    </div>
                    <el-row class="cert-text-list">
                      <el-form-item label-width="0px" size="mini" class="cert-text"
                                    v-for="(item,index) in formPpt.masters" :key="item.id">
                        <div class="cert-text-del">
                          <el-button type="danger" icon="el-icon-delete" circle
                                     size="mini" @click="deletePptMaster(index,item)"></el-button>
                        </div>
                        <div style="position: relative;">

                          <el-col :span="4">
                            <el-input v-model="item.name" placeholder="名称"></el-input>
                          </el-col>
                          <el-col :span="14">
                            <z-upload-button label="上传" :value="item.pic" :base64="false" :item="item"
                                             @change="pageUpload" @text_change="textChange"></z-upload-button>
                          </el-col>
                          <el-col :span="4">
                            <el-button @click="editMaster(item)" size="mini">编辑</el-button>
                          </el-col>
                        </div>
                      </el-form-item>
                    </el-row>
                    <el-row>
                      <el-button plain icon="el-icon-plus" size="mini" @click="addPptMaster"></el-button>
                    </el-row>
                  </el-form-item>
                </el-row>

                <!--data-->
                <div class="title">数据源</div>
                <el-row class="div-page-ppt">
                  <el-form-item>
                    <div class="step-box">
                      <el-row class="cert-text">
                        <el-col :span="2">名称</el-col>
                        <el-col :span="14">数据类型</el-col>
                        <el-col :span="3">分组</el-col>
                        <el-col :span="3">分页</el-col>
                        <el-col :span="2">排序</el-col>

                      </el-row>
                    </div>
                    <el-row class="cert-text-list">
                      <el-form-item label-width="0px" size="mini" class="cert-text"
                                    v-for="(item,index) in formPpt.resources" :key="item.id">
                        <div class="cert-text-del">
                          <el-button type="danger" icon="el-icon-delete" circle
                                     size="mini" @click="delResource(index,item)"></el-button>
                        </div>
                        <div style="position: relative;">
                          <el-col :span="2">
                            <el-input v-model="item.name" placeholder="名称"></el-input>
                          </el-col>
                          <el-col :span="14">
                            <el-select v-model="item.certTypeIds" placeholder="请选择" multiple style="width:100%">
                              <el-option v-for="item in certTypeListCur"
                                         :key="item.id"
                                         :label="item.name"
                                         :value="item.id">
                              </el-option>
                            </el-select>
                          </el-col>
                          <el-col :span="3">
                            <el-input v-model="item.groupBy"  placeholder="分组">
                            </el-input>
                          </el-col>
                          <el-col :span="2">
                            <el-input v-model="item.pageSize" placeholder="每页大小"></el-input>
                          </el-col>
                          <el-col :span="3">
                            <el-input v-model="item.sortBy" placeholder="排序"></el-input>
                          </el-col>

                        </div>
                      </el-form-item>
                    </el-row>
                    <el-row>
                      <el-button plain icon="el-icon-plus" size="mini" @click="addResource"></el-button>
                    </el-row>
                  </el-form-item>
                </el-row>

                <!--page-->
                <div class="title">幻灯片</div>
                <el-row class="div-page-ppt">
                  <el-form-item>
                    <div class="step-box">
                      <el-row class="cert-text">
                        <el-col :span="3">模板页</el-col>
                        <el-col :span="10">页面名称</el-col>
                        <el-col :span="4">数据源</el-col>
                        <el-col :span="4">数据类型</el-col>

                      </el-row>
                    </div>
                    <el-row class="cert-text-list">
                      <el-form-item label-width="0px" size="mini" class="cert-text"
                                    v-for="(item,index) in formPpt.pages" :key="item.id">
                        <div class="cert-text-del" style="margin-left: -100px;">
                          <el-button icon="el-icon-document-copy" circle="true" size="mini"
                                     @click="copyPptPage(item)"></el-button>
                          <el-button type="danger" icon="el-icon-delete" circle
                                     size="mini" @click="deletePptPage(index,item)"></el-button>
                        </div>
                        <div style="position: relative;">
                          <el-col :span="3">
                            <el-select v-model="item.master" clearable>
                              <el-option v-for="item in formPpt.masters"
                                         :key="item.name" :label="item.name" :value="item.name">
                              </el-option>
                            </el-select>
                          </el-col>

                          <el-col :span="8">
                            <el-input v-model="item.name" placeholder="名称"></el-input>
                          </el-col>
                          <el-col :span="4">
                            <el-select v-model="item.resource" clearable>
                              <el-option v-for="item in formPpt.resources"
                                         :key="item.id" :label="item.name" :value="item.id">
                              </el-option>
                            </el-select>
                          </el-col>
                          <el-col :span="4">
                            <el-select v-model="item.type" clearable>
                              <el-option v-for="item in pageTypeList"
                                         :key="item.id" :label="item.name" :value="item.id">
                              </el-option>
                            </el-select>

                          </el-col>
                          <el-col :span="5">
                            <el-checkbox v-model="item.isHidden">是否隐藏</el-checkbox>
                            <el-button icon="el-icon-top" circle="true" size="mini"
                                       @click="upPptPage(index)" v-if="index != 0"></el-button>
                            <el-button icon="el-icon-bottom" circle="true" size="mini"
                                       @click="downPptPage(index)" v-if="index < formPpt.pages.length"></el-button>
                          </el-col>



                        </div>
                      </el-form-item>
                    </el-row>
                    <el-row>
                      <el-button plain icon="el-icon-plus" size="mini" @click="addPptPage"></el-button>
                    </el-row>
                  </el-form-item>
                </el-row>

                <el-form-item style="text-align: center;padding-right: 50px;margin-top: 10px;">
                  <el-button class="el-button--primary" @click="savePpt">保存</el-button>
                </el-form-item>
              </el-form>
            </div>
          </div>
          <!-- ppt text -->
          <div v-show="currentNode.level==4">
            <div class="edit-menu">
              <el-button class="el-button" type="success" plain @click="copyPptPage">复制</el-button>
            </div>
            <div class="edit-form" style="padding: 20px;margin-top:10px;">
              <el-form ref="form" :model="form" label-width="130px" size="mini">
                <el-form-item label="名称" prop="name">
                  <el-input v-model="form.name" readonly="readonly"></el-input>
                </el-form-item>

                <el-form-item>
                  <div class="step-box">
                    <el-row class="ppt-text-title">
                      <el-col :span="8">[x, y] [height，width] [align, valign] [分组] [padding]</el-col>
                      <el-col :span="16">
                        <el-col :span="6">文本</el-col>
                        <el-col :span="4">字体</el-col>
                        <el-col :span="2" style="text-align: right">大小</el-col>
                        <el-col :span="2" style="text-align: right">颜色</el-col>
                        <el-col :span="10" style="text-align: center">字宽,行高,加粗,下划线,段前</el-col>
                        <!--
                        <el-col :span="3" style="text-align: right">行高</el-col>
                        <el-col :span="2" style="text-align: right">blod</el-col>
                        <el-col :span="2" style="text-align: right">段前</el-col>
                        -->
                      </el-col>
                    </el-row>
                  </div>

                  <el-row class="cert-text-list">
                    <el-form-item label-width="0px" size="mini" class="ppt-text-form" style="min-height: 80px;"
                                  v-for="(item,index) in form.items" :key="item.id">
                      <div>
                        <el-row>
                          <div class="ppt-text-del">
                            <el-button icon="el-icon-document-copy" circle="true" size="mini"
                                       @click="copyPptPageText(item)"></el-button>
                            <el-button type="danger" icon="el-icon-delete" circle
                                       size="mini" @click="deletePptPageText(index,item)"></el-button>
                          </div>
                          <!-- ppt text edit-->
                          <div v-if="item.id == currentEditId" style="position: relative;">

                            <div style="min-height: 30px;">
                              <el-col :span="7" >
                                <el-row>
                                  <el-col :span="6">
                                    <el-input v-model="item.options.x" placeholder="x"></el-input>
                                  </el-col>
                                  <el-col :span="6">
                                    <el-input v-model="item.options.y" placeholder="y"></el-input>
                                  </el-col>
                                  <el-col :span="6">
                                    <el-input v-model="item.options.h" placeholder="height"></el-input>
                                  </el-col>
                                  <el-col :span="6">
                                    <el-input v-model="item.options.w" placeholder="width"></el-input>
                                  </el-col>

                                </el-row>
                              </el-col>
                              <el-col :span="8" style="padding-left:5px;">
                                <el-row>
                                  <el-col :span="5">
                                    <el-input v-model="item.options.inset" placeholder="padding"></el-input>
                                  </el-col>
                                  <el-col :span="5">
                                    <el-select v-model="item.options.align" clearable placeholder="align">
                                      <el-option v-for="font in alignList" :key="font.code" :label="font.code"
                                                 :value="font.code"></el-option>
                                    </el-select>
                                  </el-col>
                                  <el-col :span="5">
                                    <el-select v-model="item.options.valign" clearable placeholder="valign">
                                      <el-option v-for="font in valignList" :key="font.code" :label="font.code"
                                                 :value="font.code"></el-option>
                                    </el-select>
                                  </el-col>
                                  <el-col :span="9">
                                    <el-input v-model="item.options.fill" placeholder="background color"></el-input>
                                  </el-col>
                                </el-row>
                              </el-col>

                              <el-col :span="4" style="padding-left:5px;" v-if="item.type != 'picture'">
                                <el-row>
                                  <el-col :span="10" >
                                    <el-checkbox v-model="item.options.shrinkText">自适应</el-checkbox>
                                  </el-col>
                                  <el-col :span="14" >
                                    <el-input v-model="item.options.groups" placeholder="分组[5,5]"></el-input>
                                  </el-col>
                                </el-row>
                              </el-col>
                              <el-col :span="3" style="padding-left:5px;">
                                <el-input v-model="item.options.conf" placeholder="条件"></el-input>
                              </el-col>
                              <el-col :span="1" style="padding-left:5px;" >
                                <el-button type="success" icon="el-icon-check" circle size="mini"
                                           @click="closeEditor"></el-button>
                              </el-col>
                            </div>

                            <div style="margin-left:10px; margin-top: 8px;" v-for="(t,i) in item.texts" :key="i">
                              <el-row>
                                <el-col :span="6">
                                  <el-input ref="item_text" class="item-text" v-model="t.text"
                                            placeholder="text"></el-input>
                                </el-col>
                                <el-col :span="3">
                                  <el-input v-model="t.options.fontFace" placeholder="font"></el-input>
                                </el-col>
                                <el-col :span="2">
                                  <el-input v-model="t.options.fontSize" placeholder="size"></el-input>
                                </el-col>
                                <el-col :span="2">
                                  <el-input v-model="t.options.color" placeholder="color"></el-input>
                                </el-col>
                                <el-col :span="2">
                                  <el-input v-model="t.options.highlight" placeholder="highlight color"></el-input>
                                </el-col>
                              </el-row>

                              <el-row >
                                <el-col :span="2">
                                  <el-input v-model="t.options.charSpacing" placeholder="char space"></el-input>
                                </el-col>
                                <el-col :span="2">
                                  <el-input v-model="t.options.lineSpacing" placeholder="line height"></el-input>
                                </el-col>

                                <el-col :span="6">
                                  <div class="div-checkbox">
                                    <el-checkbox v-model="t.options.bold">加粗</el-checkbox>
                                    <el-checkbox v-model="t.options.underline">下划线</el-checkbox>
                                    <el-checkbox v-model="t.options.breakLine">强制换行</el-checkbox>
                                    <el-checkbox v-model="t.options.superscript">上标</el-checkbox>

                                  </div>

                                </el-col>
                                <el-col :span="3">
                                  <el-input v-model="t.options.outline" placeholder="outline"></el-input>
                                </el-col>

                                <el-col :span="2">
                                  <el-input v-model="t.options.paraSpaceBefore" placeholder="段前"></el-input>
                                </el-col>

                                <el-col :span="1">
                                  <el-button icon="el-icon-plus" circle size="mini"
                                             @click="addText(i,t,item.texts)"></el-button>
                                </el-col>
                                <el-col :span="1">
                                  <el-button icon="el-icon-close" circle size="mini"
                                             @click="delText(i,t,item.texts)"></el-button>
                                </el-col>
                              </el-row>


                            </div>


                          </div>

                          <el-row v-if="item.id != currentEditId" class="cert-text-show"
                                  @click.native="editCertText(item)">

                            <div style="margin-top: 2px;">
                              <el-col :span="8" class="item-info">
                                <span>[{{item.options.x}}, {{item.options.y}}]</span>
                                <span>[{{item.options.h}}, {{item.options.w}}]</span>
                                <span>[{{item.options.align}}, {{item.options.valign}}]</span>
                                <span>{{item.options.groups}}</span>
                                <span>{{item.options.inset}}</span>
                                <div style="float:right;padding-right: 15px;" v-if="item.options.conf">
                                  <i class="el-icon-info"></i>
                                </div>
                              </el-col>

                              <el-col :span="16">
                                <el-row v-for="t in item.texts" class="pp-text-info2">
                                  <el-col :span="6" class="one-line">{{t.text}}</el-col>
                                  <el-col :span="6" class="one-line">{{t.options.fontFace||"-"}}</el-col>
                                  <el-col :span="2" style="text-align: right">{{t.options.fontSize||"-"}}</el-col>
                                  <el-col :span="2" style="text-align: right">{{t.options.color||"-"}}</el-col>
                                  <el-col :span="8" style="text-align: center">{{t.options.charSpacing||"-"}}, {{t.options.lineSpacing||"-"}}, {{t.options.bold?"加粗":"-"}}, {{t.options.underline?"下划线":"-"}}, {{t.options.paraSpaceBefore||"-"}}</el-col>
                                  <!--
                                  <el-col :span="3" style="text-align: right">{{t.options.charSpacing||"-"}}</el-col>
                                  <el-col :span="3" style="text-align: right">{{t.options.lineSpacing||"-"}}</el-col>
                                  <el-col :span="2" style="text-align: right">{{t.options.bold?"加粗":"-"}}</el-col>
                                  <el-col :span="2" style="text-align: right">{{t.options.bold?"加粗":"-"}}</el-col>
                                  <el-col :span="2" style="text-align: right">{{t.options.paraSpaceBefore||"-"}}</el-col>
                                  -->
                                </el-row>

                              </el-col>


                            </div>
                            <div>
                            <span>
                              <span class="cert-text-text-span" v-html="item.text"></span>
                            </span>
                            </div>
                          </el-row>

                        </el-row>
                      </div>
                    </el-form-item>
                  </el-row>
                  <el-row>
                    <el-button plain icon="el-icon-plus" size="mini" @click="addPptPageText">
                    </el-button>
                  </el-row>
                </el-form-item>


                <el-form-item style="text-align: center;padding-right: 50px;margin-top: 10px;">
                  <el-button class="el-button--primary" @click="savePptPage">保存</el-button>
                </el-form-item>
              </el-form>
            </div>
          </div>
        </div>
        <div style="margin-left:2%;padding: 10px; margin-top: 20px;" class="edit-form">
          <p>变量说明</p>
          <div style="padding: 20px;" v-if="currentNode.level==2">
            {"groupNum":"分组数量（当类型为获奖明单数据项时）"}
          </div>
          <div style="padding: 20px;" v-if="form.type==1">
            {"date":"日期","copy_right":"版本号","address":"地址"}
          </div>
          <div style="padding: 20px;" v-if="form.type==2">
            {"Award":"奖项","Ranking":"等级","TeamNumber":"团队编号","TeamName":"团队编号","TeamName":"团队名称","Name":"授权对象","StudentNumber":"学生编号"
            ,"Division":"区域","HSV":"HSV","TestName":"学科","Score":"分数"}
          </div>
          <div style="padding: 20px;" v-if="form.type==3">
            {"Award":"奖项","Ranking":"等级","TeamNumber":"团队编号","TeamName":"团队编号","TeamName":"团队名称","Name":"授权对象","StudentNumber":"学生编号"
            ,"Division":"区域","HSV":"HSV","TestName":"学科","Score":"分数"}
          </div>
        </div>
      </el-col>
    </el-row>

  </div>

</div>
<script>
  new Vue({
    el: '#app',
    data: {
      certTypeListCur: [],
      groupByNames:[{code:"_rank",name:"等级"},{code:"Division",name:"区域"}],
      pageTypeList: [{id: 1, name: "基础数据"}, {id: 2, name: "奖项数据"}, {id: 3, name: "获取名单数据"}],
      treeNodeIcon: ["", "el-icon-folder", "el-icon-document-copy", "el-icon-s-tools", "el-icon-document"],
      currentNode: {level: 0},
      currentEditId: "0",
      alignList: [{"code": "left"}, {"code": "center"}, {"code": "right"},],
      valignList: [{"code": "top"}, {"code": "middle"}, {"code": "bottom"},],
      pptList: [
        {"id": "usad", name: "usad", items: [], level: 1},
        {"id": "usap", name: "usap", items: [], level: 1}
      ],
      defaultProps: {"label": "name", "children": "items"},
      form: {texts:[{options:{lineSpacing:0}}]},
      formPpt: {resources: [], masters: [], pages: [], width: 33.87, height: 19.05, default: {}},
    },

    watch: {
      "formPpt.type": function (val) {
        if (this.currentNode.level == 2) {
          this.certTypeListCur = this.certTypeList.filter(item => item.type == val)
        }
      }

    },
    computed: {},
    created: function () {
      //  this.addPpt();
      $$.listBy("cert_type", "name",{status:1}, (list) => {
        this.certTypeList = list;
        this.certTypeList.push({id:"a7",name:"团队奖4~10","type":"usad"});
        this.certTypeList.push({id:"a3",name:"团队奖1~3","type":"usad"});
        this.certTypeList.push({id:"a7",name:"团队奖4~10","type":"usap"});
        this.certTypeList.push({id:"a3",name:"团队奖1~3","type":"usap"});
        this.getPpt()
      });

    },
    methods: {
      getPpt() {
        $$.list("ppt", (list) => {
          list.forEach(item => {
            this.initPptNodeData(item);
          });

          this.pptList.forEach(g => {
            list.forEach(item => {
              if (g.name == item.type) {
                g["items"].push(item);
              }
            });
          });
        })
      },
      initPptNodeData(item) {
        item.form = JSON.stringify(item);
        item.level = 2;
        item.pages.forEach(page => {
          page.level = 4;
        });
        item.items = [];
        let finds = (item.masters||[]).filter(t => t.detail);
        finds.forEach(t =>{
          item.items.push({"id":t.id,"level":4,"name":"[模板页]" + t["name"]});
        });

        item.items.push(...item.pages);
        item.items.forEach(t =>t["pptId"] = item.id);

      },
      handleNodeClick(data) {
        if (data.level == 1) {
          return;
        }
        if (this.currentNode == data) {
          return;
        }
        this.currentNode = data;
        if (data.level == 2) {
          if (!data.form) {
            data.form = JSON.stringify(data);
          }
          this.formPpt = JSON.parse(data.form);

        } else {
          if (!data.form) {
            $$.fetch("ppt_page", data.id, (page) => {
              let newForm = $.extend({"items": page.items}, data);
              data.form = JSON.stringify(newForm);
              this.currentEditId = data.id;
              this.form = newForm;
            });
            return;
          }
          this.form = JSON.parse(data.form);
        }
      },

      save(data,callback, errorCallback){
        data = $.extend({},data);
        $$.save("ppt", data, (ppt) => callback(ppt), errorCallback);
      },
      addPpt() {

        $$.uuid(id => {
          this.currentNode = {level: 2};
          this.formPpt = {
            id, name: "new ppt", masters: [], pages: [], resources: [], type: "usad", unit: "cm", default: {}
          };
          this.addPptPage();
        });

      },
      deletePpt() {
        let dNode = this.currentNode;
        let cc = layer.confirm(`是否确定删除ppt[${this.formPpt.name}]?`, () => {
          if (dNode && dNode.id) {
            $$.delete("ppt", this.formPpt.id, () => {
              this.$refs.tree.remove(dNode);
              // let index = dNode.parent.certs.findIndex(d => d.id === dNode.id);
              // dNode.parent.certs.splice(index,1);
              layer.msg("删除成功!")

            }, (r) => {
              layer.msg(r.msg || "删除失败！");
            })
          } else {
            this.addPpt()
          }

        });
      },
      copyPpt() {
        $$.op("ppt", "copy", {id: this.formPpt.id}, (ppt) => {

          this.initPptNodeData(ppt);
          let find2 = this.pptList.find(item => item.id == this.formPpt.type);
          this.$refs["tree"].append(ppt, find2)
          layer.msg("复制成功!");
        }, (r) => {
          layer.msg(r.msg || "复制失败!")
        })
      },
      savePpt() {
        let f = JSON.stringify(this.formPpt);
        this.save( this.formPpt, (ppt) => {

          let newNode = JSON.parse(f);
          this.initPptNodeData(newNode);
          if (!this.currentNode.id) {
            this.currentNode = newNode;
            let find2 = this.pptList.find(item => item.id == this.formPpt.type);
            this.$refs["tree"].append(this.currentNode, find2)
          } else {
            this.currentNode.name = newNode.name;
            this.currentNode.items = newNode.items;
            this.currentNode.masters = newNode.masters;
          }
          this.currentNode.form = f;
          layer.msg("保存成功!")
        }, (r) => {
          layer.msg(r.msg || "保存失败！")
        })
      },
      // master
      addPptMaster() {
        $$.uuid(id => {
          this.formPpt.masters.push({id, pic: "", type: "master", name: "master" + (this.formPpt.masters.length + 1)})
        });
      },
      deletePptMaster(i, item) {
        let cc = layer.confirm(`是否确定删除模板页[${item.name}]?`, () => {
          this.formPpt.masters.splice(i, 1);
          this.removeMasterPage(item.id);
          layer.closeAll();
        });
        // delete item
        // this.currentEditId = "";
      },
      editMaster(item){
        let doNext = ()=>{
          let find = (this.currentNode["items"] ||[]).find(t => t["id"] == item["id"]);
          if (!find){
            find = {"id":item.id,"level":4,"name":"[模板页]" + item["name"],"pptId":this.currentNode["id"]};
            this.$refs["tree"].insertBefore(find, this.currentNode["items"][0]);
          }
          this.$refs["tree"].setCurrentNode(find);
          this.handleNodeClick(find);
        };
        if (!item.detail){
          item.detail=true;
          let f = JSON.stringify(this.formPpt);
          this.save( this.formPpt, (ppt) => {
            this.currentNode.form = JSON.stringify(ppt);
            doNext();
          });
        }else{
          doNext();
        }

      },
      removeMasterPage(id){
        // let pages =this.formPpt["pages"]||[];
        // debugger;
        // for(let i=0; i < pages.length;i++){
        //   if(pages[i].id == id){
        //     pages.splice(i,1);
        //     debugger;
        //     return;
        //   }
        // }

      },
      pageUpload(e) {
        $$.upload("ppt", {name: this.formPpt.type + "/" + e.name, data: e.data}, (path) => {
          e.item.pic = path;
        });
      },
      textChange(e){
        e.item.pic = e.value;
      },
      //resources
      addResource() {
        $$.uuid(id => {
          this.formPpt.resources.push({id, certTypeIds: [], name: "data" + (this.formPpt.resources.length + 1)});
        })

      },
      delResource(i, item) {
        this.formPpt.resources.splice(i, 1);
        let cc = layer.confirm(`是否确定删除数据源[${item.name}]?`, () => {
          this.formPpt.resources.splice(i, 1);
          layer.closeAll();
        });
      },

      // page
      addPptPage() {
        $$.uuid(id => {
          this.formPpt.pages.push({id, pic: "", name: "幻灯片" + (this.formPpt.pages.length + 1)})
        })

      },
      copyPptPage(item) {
        layer.confirm(`将复制幻灯片的所有内容并保存ppt，是否继续？?`, () => {
          let newPpt = $.extend({"copy_page_id": item.id}, this.formPpt);
          this.save(newPpt, (ppt) => {
            this.currentNode.form = JSON.stringify(ppt);
            this.formPpt = $.extend({}, ppt);
            this.initPptNodeData(ppt);
            this.currentNode.name = ppt.name;
            this.currentNode.items = ppt.items;
            this.currentNode.masters = ppt.masters;

            layer.msg("复制成功!")
          }, (r) => {
            layer.msg(r.msg || "复制成功！")
          })
        })
      },
      deletePptPage(i, item) {
        let cc = layer.confirm(`将删除删除幻灯片[${item.name}]并保存ppt，是否继续?`, () => {
          // this.formPpt.pages.splice(i, 1);
          // layer.closeAll();
          let newPpt = $.extend({"delete_page_id": item.id}, this.formPpt);
          this.save(newPpt, (ppt) => {
            this.currentNode.form = JSON.stringify(ppt);
            this.formPpt = $.extend({}, ppt);
            this.initPptNodeData(ppt);
            this.currentNode.name = ppt.name;
            this.currentNode.items = ppt.items;
            this.currentNode.masters = ppt.masters;

            layer.msg("删除成功!")
          }, (r) => {
            layer.msg(r.msg || "删除成功！")
          })
        });

        // delete item
        // this.currentEditId = "";
      },
      upPptPage(i) {
        let temp1 = this.formPpt.pages[i];
        let temp2 = this.formPpt.pages[i-1];
        Vue.set(this.formPpt.pages,i,temp2);
        Vue.set(this.formPpt.pages,i-1,temp1);
      },
      downPptPage(i) {
        let temp1 = this.formPpt.pages[i];
        let temp2 = this.formPpt.pages[i+1];
        Vue.set(this.formPpt.pages,i,temp2);
        Vue.set(this.formPpt.pages,i+1,temp1);
      },

      // page text
      savePptPage() {
        $$.save("ppt_page", this.form, (r) => {
          this.form.items = r.items;
          let f = JSON.stringify(this.form);
          this.currentNode.form = f;
          layer.msg("保存成功!")
        }, (r) => {
          layer.msg(r.msg || "保存失败！")
        })
      },
      addPptPageText() {
        $$.uuid(id => {
          let item = {
            id,
            texts: [{"text": "", options: {}}],
            options: {w: '100%', h: '100%', align: 'left', valign: 'top'}
          };
          this.form.items.push(item);
          this.editCertText(item);
        })
      },
      copyPptPageText(item) {
        $$.uuid((id) => {
          let newCT = JSON.parse(JSON.stringify(item));
          newCT["id"] = id;
          this.form.items.push(newCT)
          this.editCertText(newCT);
        });
      },
      deletePptPageText(i) {
        this.form.items.splice(i, 1);
        // delete item
        this.currentEditId = "";
      },

      addText(i, t, texts) {
        texts.splice(i + 1, 0, {"text": "", options: {}});
        // texts.push({})
      },
      delText(i, t, texts) {
        texts.splice(i, 1);
      },
      editCertText(item) {
        this.currentEditId = item.id;
        setTimeout(() => {
          $(".item-text input").focus()
        }, 200)

        // this.$refs.item_text[0].focus();
      },
      closeEditor() {
        this.currentEditId = "0";
      },
    }
  })
</script>
</body>

</html>